<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/fonts/fontawesome-webfont.woff">
    <link rel="stylesheet" href="../css/fonts/fontawesome-webfont.woff2">

    <title>交大「江湖令」</title>

    <style>
        html {
            height: 100%;
        }

        body {
            margin: 0;
            height: 100%;
            overflow:hidden;
            background:#b7eee2;
        }

        canvas{
            z-index:-1;
            position:absolute;
        }

        #app {
            width: 100%;
            height: 100%;
            /*定义为一个flex盒子*/
            display: flex;
            /*内部元素按行排列*/
            flex-direction: row;
            min-width: 400px;
            min-height: 400px;
            /* 主轴居中 */
            justify-content: center;
            /* 交叉轴居中 */
            align-items: center;
        }

        form {
            width: 20%;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px;
            padding: 30px 30px;
            border-radius: 8px;
            min-width: 450px;
        }
    </style>
</head>

<body>
<div id="app">
    <form class="admin.login" style="background-color: white; opacity: 0.95;">
        <div style="text-align: center;margin-bottom:20px;">
            <img src="./control/assest/images/long_logo.png" style="width: 100%;">
        </div>
        <div class="input-group mb-2 mr-sm-2">
            <label for="u_name">
              <div class="input-group-prepend">
                <div class="input-group-text">用户名</div>
              </div>
            </label>
            <input type="text" class="form-control" id="u_name" v-model="user.u_name" required />
          </div>
        <div class="input-group mb-2 mr-sm-2">
            <label for="u_pwd">
                <div class="input-group-prepend">
                    <div class="input-group-text">新密码</div>
                </div>
            </label>
            <input type="password" class="form-control" id="u_pwd" v-model="user.u_pwd" onKeyUp="pwStrength(this.value)" onBlur="pwStrength(this.value)" required />
            <table style="width: 100%; height: 20px; border:1px; border-color: #0f0f0f;">
                <tr style="background-color: #eeeeee">
                    <td style="width: 33%; " id="strength_L">弱</td>
                    <td width="33%" id="strength_M">中</td>
                    <td width="33%" id="strength_H">强</td>
                </tr>
            </table>
        </div>
        <div class="input-group mb-2 mr-sm-2">
            <label>
                <div class="input-group-prepend">
                    <div class="input-group-text">确认密码</div>
                </div>
            </label>
            <input type="password" class="form-control" id="u_cpwd" onkeyup="valid()" required>
            <span id="tishi"></span>
        </div>
        <div style="text-align: center">
            <button class="btn btn-primary" type="button" @click="updatepwd" style="width: 100%;">确认修改</button>
        </div>
    </form>
</div>

<!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
<script src="../js/jquery-3.6.0.slim.min.js"></script>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/vue.global.js"></script>
<!-- <script src="https://unpkg.com/vue"></script> -->
<script src="../js/axios.min.js"></script>
<script src="../js/my-axios.js"></script>
<script src="../layer/layer.js"></script>
<script src="../js/verificationNumbers.js" tppabs="js/verificationNumbers.js"></script>
<script src="../js/Particleground.js" tppabs="js/Particleground.js"></script>

<script>
    $(document).ready(function() {
        //粒子背景特效
        $('body').particleground({
            dotColor: '#5cbdaa',
            lineColor: '#5cbdaa'
        });
    });

    const app = {
        data() {
            return {
                user: {
                    u_name: '',
                    u_pwd: ''      // 密码
                },
                loadIdx: null
            }
        },
        methods: {
            updatepwd() {
                this.loadIdx = layer.load();
                myAxios.post('/forgetpwd', this.user)
                    .then(res => {
                        layer.close(this.loadIdx);
                        if (res.data.success) {
                            layer.msg('修改密码成功!', {
                                icon: 1,
                                time: 800
                            }, () => {
                                // 闪完后跳转
                                window.location.href = '../login.html';
                            });
                        } else {
                            layer.msg(res.data.message, {
                                icon: 2,
                                time: 1500
                            });
                        }
                    })
                    .catch(err => {
                        layer.close(this.loadIdx);
                        layer.msg('系统错误！', {icon: 2, time: 800});
                    });
            }

        },

        //定义回调方法：mounted 该方法在页面渲染完成立即执行
        mounted(){
        }
    };

    // 判断密码强弱
    //CharMode函数
    //测试某个字符是属于哪一类.
    function CharMode(iN)
    {
        if (iN>=48 && iN <=57) //数字
            return 1;
        if (iN>=65 && iN <=90) //大写字母
            return 2;
        if (iN>=97 && iN <=122) //小写
            return 4;
        else
            return 8; //特殊字符
    }
    //bitTotal函数
    //计算出当前密码当中一共有多少种模式
    function bitTotal(num)
    {
        modes=0;
        for (i=0; i<4; i++)
        {
            if (num & 1) modes++;
            num>>>=1;
        }
        return modes;
    }
    //checkStrong函数
    //返回密码的强度级别
    function checkStrong(sPW)
    {
        if (sPW.length<=4)
            return 0; //密码太短
        Modes=0;
        for (i=0; i<sPW.length; i++)
        {
            //测试每一个字符的类别并统计一共有多少种模式.
            Modes|=CharMode(sPW.charCodeAt(i));
        }
        return bitTotal(Modes);
    }
    //pwStrength函数.www.qichepeijian.com
    //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色
    function pwStrength(pwd)
    {
        O_color="#eeeeee";
        L_color="#FF0000";
        M_color="#FF9900";
        H_color="#33CC00";
        if (pwd==null||pwd=='')
        {
            Lcolor=Mcolor=Hcolor=O_color;
        }
        else
        {
            S_level = checkStrong(pwd);
            switch(S_level)
            {
                case 0:
                    Lcolor = Mcolor = Hcolor = O_color;
                case 1:
                    Lcolor = L_color;
                    Mcolor = Hcolor = O_color;
                    break;
                case 2:
                    Lcolor = Mcolor = M_color;
                    Hcolor = O_color;
                    break;
                default:
                    Lcolor=Mcolor=Hcolor=H_color;
            }
        }
        document.getElementById("strength_L").style.background=Lcolor;
        document.getElementById("strength_M").style.background=Mcolor;
        document.getElementById("strength_H").style.background=Hcolor;
        return;
    }

    // 验证两次输入密码的一致性
    function valid() {
        var pwd1 = document.getElementById("u_pwd").value;
        var pwd2 = document.getElementById("u_cpwd").value;

        if (pwd1 == pwd2) {
            document.getElementById("tishi").innerHTML="<font color='green'>两次输入的密码相同</font>";
            // document.getElementById("submit").disabled = false;
        }
        else {
            document.getElementById("tishi").innerHTML="<font color='red'>两次输入的密码不相同</font>";
            // document.getElementById("submit").disabled = true;
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>

</html>